<template>
  <div class="helpers-page">
    <div class="section-panel">
      <section-title title="生活小工具" />
      <div class="helper-list">
        <helper-item
          v-for="(v,i) in list"
          :key="i"
          :icon="v.icon"
          :text="v.text"
          :to="v.to"
          class="item"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { SectionTitle, HelperItem } from '@/components'
import helperIcon1 from '@/assets/icons/helper-1.png'
import helperIcon2 from '@/assets/icons/helper-2.png'
import helperIcon3 from '@/assets/icons/helper-3.png'
import helperIcon4 from '@/assets/icons/helper-4.png'
import helperIcon5 from '@/assets/icons/helper-5.png'

export default {
  name: 'helpers-page',
  components: { SectionTitle, HelperItem },
  data: () => ({
    list: [
      { icon: helperIcon1, text: '老年历', to: { name: 'calendar-detail' } },
      { icon: helperIcon2, text: '抽签', to: { name: 'drawlots-detail' } },
      { icon: helperIcon3, text: '我的心情', to: { name: 'mood-history' } },
      { icon: helperIcon4, text: '星座运势', to: { name: 'constellation-detail' } },
      { icon: helperIcon5, text: '卡片管理', to: { name: 'cards-admin' } }
    ]
  })
}
</script>

<style lang="stylus">
.helpers-page {
  // background-color: #fff;
}

.section-panel {
  padding: 16px;
  background-color: #fff;
}

.helper-list {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 33.33%;
    margin: 16px 0;
  }
}
</style>
